<template>
  <div class="login_box">
    <div class="login_box_content">
      <div class="login_box_content_left">
        <h1 class="LSJDGLXT">连锁酒店管理系统</h1>
        <p class="HMS">Hotel management system</p>
      </div>
      <div class="login_box_content_right">
        <p class="welcome">欢迎登录！</p>
        <el-form :model="ruleForm">
          <el-form-item prop="username" label-position="center">
            <el-input
              class="username"
              placeholder="账号"
              v-model="ruleForm.username"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              class="password"
              placeholder="密码"
              v-model="ruleForm.password"
            />
          </el-form-item>
          <el-form-item class="code_box" prop="cap">
            <el-input
              class="code"
              v-model="ruleForm.cap"
              placeholder="验证码"
            ></el-input>
            <span v-html="cap_data" @click="getCap"></span
          ></el-form-item>
          <el-form-item>
            <el-button class="login" @click="login" color="#626aef"
              >登入</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup >
import { ref, reactive, onMounted } from "vue";
import http from "../utils/request";
import { useRouter } from "vue-router";
 

const router = useRouter();

let ruleForm = ref({
  username: "",
  password: "",
  cap: "",
});

let login = async () => {

  let {
    data: { code, msg, obj, token },
  } = await http.get("login", { params: ruleForm.value });
  if (ruleForm.value.cap == cap_text.value) {

    if (code == 200) {

      sessionStorage.setItem("token", token);
      sessionStorage.setItem("obj", JSON.stringify(obj));
      sessionStorage.setItem("rid", obj[0].rid);
      router.push('/')

    } else if (code == 201) {
      this.$message.success(msg);
    }
  }
};

let cap_data = ref(null);
let cap_text = ref(null);

onMounted(() => {
  getCap();
});
let getCap = async () => {
  let {
    data: { data, text },
  } = await http.get("get_captch");
  cap_data.value = data;
  cap_text.value = text;
  console.log(ruleForm.value);
};
</script>
<style  scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.login_box {
  width: 100%;
  height: 100vh;
  background-image: url(../public/酒店背景.jpg);
}
.login_box_content {
  width: 1200px;
  height: 600px;
  background-color: rgba(234, 254, 234, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}
.login_box_content_left {
  width: 50%;
  height: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.login_box_content_right {
  width: 50%;
  height: 100%;
  background: rgb(255, 255, 255);
  padding: 40px 70px;
}

.LSJDGLXT {
  font-size: 45px;
  color: white;
}
.HMS {
  font-size: 25px;
  color: white;
  margin-top: 5px;
}
.welcome {
  font-size: 30px;
  color: rgb(0, 0, 0);
}
.username {
  width: 100%;
  height: 55px;
  margin-top: 50px;
  border: none;
  border-bottom: 1px solid rgb(194, 207, 253);
  outline: none;
  line-height: 55px;
}
.password {
  width: 100%;
  height: 55px;
  margin-top: 15px;
  border: none;
  border-bottom: 1px solid rgb(194, 207, 253);
  outline: none;
  line-height: 55px;
}
.code {
  width: 100%;
  height: 55px;
  margin-top: 15px;
  border: none;
  border-bottom: 1px solid rgb(194, 207, 253);
  outline: none;
}
.login {
  width: 100%;
  height: 55px;
  margin-top: 25px;
  background-color: rgb(98, 106, 239);
  font-size: 20px;
}

.code_box {
  display: flex;
  justify-content: space-between;
}
</style>